/*eslint-disable*/
import React from 'react';
import { withRouter } from 'react-router-dom';
import BaseTable from '@/components/treeTable/index';
import '../../mysite.scss';
import { Button, Modal, message } from 'antd';
const { confirm } = Modal;
import Api from '@/api/index'

class Struct extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            columns: [],
            tools: [],
            btns: [],
            batch: [],
            select: true,
            selectRows: [],
            listQuery:{
                name:'',
                code:''
            }
        }

    }

    componentDidMount() {
        // table columns
        const columns = [
            {
                title: '机构名称',
                dataIndex: 'name',
                width: 150,
            },
            {
                title: '归属区域',
                dataIndex: 'area',
                width: 150,
            },
            {
                title: '机构编码',
                dataIndex: 'code',
                width: 150,
            },
            {
                title: '机构类型',
                dataIndex: 'type',
                width: 150,
            },
            {
                title: '备注',
                dataIndex: 'note',
            },
            {
                title: '操作',
                key: 'action',
                width: 220,
                fixed: 'right',
                render: (text, record, index) => {
                    return (<div className="table_action_group">
                        <Button type="primary" size="small" onClick={this.handleEdit.bind(this, text)}>编辑</Button>
                        <Button type="danger" size="small" onClick={this.handleRowDel.bind(this, text)}>删除</Button>
                        <Button type="primary" size="small" ghost onClick={this.handleAddLower.bind(this, text)}>添加下级机构</Button>
                    </div>)
                }
            }
        ];
        // 查询搜索
        const tools = [
            { key: 'name', label: '机构名称' },
            { key: 'code', label: '机构编码' },
        ];
        //操作按钮
        const btns = [
            { name: '添加', action: this.handleAdd, theme: 'primary' },
        ]
        //批量操作
        const batch = {
            action: this.handleBatch,
            options: [
                { name: '删除', value: 'handleDel' },
            ]
        }
        this.setState({
            columns: columns,
            handleRow: this.handleRow,
            tools: tools,
            batch: batch,
            btns: btns
        });
        //获取列表
        this.getList(this.state.listQuery);
    }
    //添加
    handleAdd = () => {
        this.props.history.push("/system/struct/handle");
    }
    //编辑
    handleEdit = (params) => {
        this.props.history.push({ pathname: "/system/struct/handle", state: { key: params.key, type: 'edit' } })
    }
    //添加下级机构
    handleAddLower = (params) => {
        this.props.history.push({ pathname: "/system/struct/handle", state: { key: params.key, type: 'add' } })
    }
    //单个删除
    handleRowDel = (params) => {
        confirm({
            title: '提示',
            content: '是否确认删除该条数据？',
            okText: 'Yes',
            okType: 'danger',
            cancelText: 'No',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    //批量操作
    handleBatch = (params) => {
        if (params == '') {
            message.error('请选择批量操作类型');
            return false;
        }
        if (this.state.selectRows.length == 0) {
            message.error('请选择数据');
            return false;
        }
        switch (params) {
            case 'handleDel':
                confirm({
                    title: '提示',
                    content: '是否确认删除选中数据？',
                    okText: 'Yes',
                    okType: 'danger',
                    cancelText: 'No',
                    onOk() {
                        console.log('OK');
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
                break;
        }
    };
    //事件传递
    handleRow = (type, value) => {
        switch (type) {
            case 'selectRow':
                this.setState({
                    selectRows: value
                })
                break;
            case 'search':
                message.success('getList' + value)
                break;
        }
    }


    //组织机构列表
    getList = (listQuery) => {
        Api.getStructList(listQuery).then(res => {
            if (res.code == 200) {
                this.setState({ data: res.data.result })
            }
        })
    };

    render() {
        return (
            <div className="table_box_bg">
                <BaseTable {...this.state} />
            </div>
        )
    }
}

export default withRouter(Struct)
